<div class="col-md-2 side-bar">
    <div class="card" style="height: 194px;">
        <div style="padding-top:1em;pdding-bottom:1em;display: block;">
            <div style="background-color: #CCCCCC; border-radius: .2em; overflow: hidden">
                <div style="background-color: #86ADD4; color: #fff; height: 1em; font-size: 1em; text-align: center; line-height: 1em; width: {{$topic->transInfo()['trans_progress_int']}}%;">{{$topic->transInfo()['trans_progress_int']}}%</div>
            </div>
        </div>
        <div style="text-align: center; padding: 1em">
            翻译进度
        </div>
        <div class="ui divider"></div>
        <div style="display:flex; text-align: center; padding: 1em 0">
            <div style="flex: 1">
                <p style="font-size: 1.1em">分块数量</p>
                <p style="font-size: 2em"> <i class="fa fa-copy"></i>&nbsp;{{$topic->transInfo()['total_section_cnt']}}</p>
            </div>

            <div style="flex: 1; text-align: center">
                 <p style="font-size: 1.1em">参与人数</p>
                <p style="font-size: 2em"> <i class="fa fa-users" ></i>&nbsp;{{$topic->transInfo()['user_cnt']}}</p>
            </div>
        </div>
    </div>

@foreach($topic->translateSections as $section)

        @if($section->isTranslated())
            @if($topic->read_right == 1 && Auth::check() || $topic->read_right == 0)
            <div class="card module-card" style="margin: 0 0 20px;display: none">
                <div class="content content-pad">
                    <div class="content-ul" style="width: 100%; text-align: left">
                        <div class="content-title">
                            <a href="{{route('users.show', $section->appliedTransRecord->user->id)}}"><img src="{{$section->appliedTransRecord->user->present()->gravatar}}" /></a>
                            <p><span class="meta">由 {{$section->appliedTransRecord->user->name}} 于<abbr
                                        class="timeago">{{$section->appliedTransRecord->updated_at}}</abbr>翻译</span></p>
                            {{--<p><abbr class="timeago">{{$section->appliedTransRecord->updated_at}}</abbr></p>--}}
                        </div>
                        <div class="content-center">
                            <div>
                                <a href="javacript:void(0);"  class="comment-vote a-btn-b" data-ajax="post" id="record-up-vote-{{$section->appliedTransRecord->id}}" data-url="{{route('user-translate.vote',['record_id' => $section->appliedTransRecord->id])}}" title="Vote Up"><i class="fa fa-thumbs-up" aria-hidden="true"></i><span class="vote-count">{{$section->appliedTransRecord->vote_count ?: '' }}</span></a>
                            </div>
                            <div>
                                <a href="{{route('user-translate.create', ['section_id' => $section->id,'record_id'=>$section->appliedTransRecord->id, 'type'=>3])}}"  class="a-btn-b">改进</a>
                            </div>
                            <div>
                                <a href="{{route('user-translate.create', ['section_id' => $section->id,'type'=>2])}}"  class="a-btn-b">重译</a>
                            </div>
                        </div>
                        <div class="content-foot">
                            由 {{$section->appliedTransRecord->auditor}} 审阅
                        </div>
                    </div>
                </div>
            </div>
            @endif
        @elseif(!$section->locked_date || $section->locked_date < \Carbon\Carbon::now())
            <div class="card module-card" style="display: none">
                <div class="card-box">
                    <button id= "claim-{{$section->id}}" class="btn btn-warning no-pjax action-btn claim" data-id="{{$topic->id}}-{{$section->id}}"
                            style="cursor:pointer;">
                        <i class="fa fa-comment" aria-hidden="true"></i> 我来翻译
                    </button>
                </div>
            </div>
        @endif
    @endforeach
@if($topic->translateSections)
    <div class="clearfix"></div>
    </div>
@endif
@section('scripts')
    <script>
        function i_translate_position() {

            $.each($('.panel-body .section'), function(index){
                if(index > 0)
                {
                    var last_bottom = $(".card.module-card").eq(index-1).offset().top + $(".card.module-card").eq(index-1).height();
                    var section_top = $('.panel-body .section').eq(index).offset().top;
                    var res_top = section_top -22;
                    if(last_bottom > section_top)
                    {
                        res_top = last_bottom - 60;
                    }

                    $(".card.module-card").eq(index).css({ position: 'absolute', top: res_top + 'px', display: 'block'});
                }
                else
                {
                    $(".card.module-card").eq(index).css({ position: 'absolute', display: 'block'});
                }

                //$(".card.module-card").show()
            });
        }
        $(document).ready(function () {

            i_translate_position();

            $(window).scroll(function()
            {
                i_translate_position();
            });


            const inputOptions = new Promise((resolve) => {
                setTimeout(() => {
                resolve({
                    '40': '40分钟',
                    '50': '50分钟',
                    '60': '60分钟'
                    })
                }, 1000);
            });

            $('.claim').click(function(event) {
                var topic_id = $(this).attr('data-id').split('-')[0];
                var section_id = $(this).attr('data-id').split('-')[1];
                event.preventDefault();
                swal({
                    title: "翻译认领",
                    type: "warning",
                    html:'在翻译时间超时前，其他人将无法参与翻译本区块。请选择翻译时间:<br>',
                    input:'radio',
                    inputOptions:inputOptions,
                    inputValue:'40',
                    showCancelButton: true,
                    cancelButtonText: "取消",
                    confirmButtonText: "认领",
                }).then(function (e) {//提交
                    if(e == 30 || e == 40 || e == 50)
                    {
                        var time_long = parseInt(e);
                        var html = "\n"+
                            "<form id='" + "form-claim-" + section_id + "' action='" + "{{route('user-translate.create')}}" + "' method='GET' style='display:none'>\n"+
                            "   <input type='hidden' name='section_id' value='" + section_id + "'>\n"+
                            "   <input type='hidden' name='time_long' value='" + time_long + "'>\n"+
                            "   <input type='hidden' name='type' value='" + 1 + "'>\n"+
//                            "   <input type='hidden' name='_token' value='"+Config.token+"'>\n"+
                            "</form>\n";
                        $('#claim-'+section_id).append(html);

                        $('#form-claim-'+section_id).submit();

                    }
                }).catch(swal.noop);
            });
        });
    </script>
@stop
